<template>
  <div class="world">
    <head-tiele></head-tiele>
    <div class="contentBox">
      <goods-ele @shopCarEle="shopCarEle"></goods-ele>
      <page-title></page-title>
      <rand-rec></rand-rec>
      <submit-ele></submit-ele>
      <botton-ele></botton-ele>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { Checkbox, CheckboxGroup } from "vant";
// 底部导航组件
import bottonEle from "../components/common/botton.vue";
// 头部标题
import headTiele from "../components/common/headTitle.vue";
// 选中商品
import goodsEle from "../components/shoppingCar/goods.vue";
// 页面标题
import pageTitle from "../components/shoppingCar/pageTitle.vue";
// 随机推荐
import randRec from "../components/common/randRec.vue";
// 总价
import submitEle from "../components/shoppingCar/submit.vue";

export default {
  data() {
    return {
      title: "购物车",
      active: 2,
      shoppingInfo: "",
    };
  },
  components: {
    headTiele,
    goodsEle,
    pageTitle,
    randRec,
    submitEle,
    bottonEle,
  },
  methods: {
    // 获取购物车信息
    getCarinfo() {
      // 购物车信息
      let info = {
        type: "get",
        url: "/cart/list",
      };
      this.$netWork(info).then((res) => {
        if (res.data.status === 0) {
          // 为数据添加单选框选中状态
          res.data.data.forEach((item) => {
            item.checked = false;
          });
          // 将购物车信息保存在 vuex
          this.$store.commit("getshppingCarInfo", res.data.data);
        }
      });
    },
    // 删除商品
    cleanBtn(val) {
      let info = {
        type: "post",
        url: "/cart/del",
        data: { id: val },
        head: "application/x-www-form-urlencoded",
      };
      this.$netWork(info).then((res) => {
        if (res.data.status === 0) {
          Toast("删除成功");
          this.getCarinfo();
        }
      });
    },
    // 商品卡片步进器点击事件
    shopCarEle(val) {
      let info = {
        type: "post",
        url: "/cart/add",
        head: "application/x-www-form-urlencoded",
        data: val,
      };
      this.$netWork(info).then((res) => {
        if (res.data.status === 0) {
          // this.getCarinfo();
        }
      });
    },
  },
  created() {
    this.getCarinfo();
  },
};
</script>

<style lang="scss" scoped>
.world {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  .contentBox {
    padding-top: 48px;
  }
}
</style>
